<!--
 * @Project_description: 模板添加编辑
-->
<template>
  <div class='pages'>
    <el-dialog v-drag :before-close='handleClose' :title='title' :visible.sync='dialogVisible' width='33%'>
      <el-form ref='form' :disabled='loading' :model='form' :rules='rules' label-width='80px'>
        <el-form-item label='上级菜单' prop='parentId'>
          <y-tree
            v-model='form.parentId'
            :normalizer='normalizer'
            :options='menuList'
            :show-count='true'
            placeholder='选择上级菜单'
          />
        </el-form-item>
        <el-form-item label='类型名称' prop='typeName'>
          <el-input v-model='form.typeName'></el-input>
        </el-form-item>
        <el-form-item label='类型编码' prop='typeCode'>
          <el-input v-model='form.typeCode'></el-input>
        </el-form-item>
        <el-row>
          <el-col :span='12'>
            <el-form-item label='状态' prop='state'>
              <el-radio-group v-model='form.state'>
                <el-radio :label='0'>启用</el-radio>
                <el-radio :label='1'>禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span='12'>
            <el-form-item label='显示排序' prop='sortKey'>
              <el-input-number v-model='form.sortKey' :min='0' controls-position='right' />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label='备注' prop='remarks'>
          <el-input v-model='form.remarks' :rows='3' maxlength='150'
                    placeholder='请输入备注' type='textarea' />
        </el-form-item>
      </el-form>
      <!-- 下放按钮 -->
      <span slot='footer' class='dialog-footer'>
        <el-button :loading='loading' type='primary' @click='onSuccess'>保 存</el-button>
        <el-button @click='dialogVisible = false'>取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import validator from '@/libs/utli.validator.js'

export default {
  name: 'menu-add',
  props: {
    menuList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    // 这里存放数据
    return {
      dialogVisible: false,
      loading: false,
      title: '添加',
      form: {
        typeName: '',
        typeCode: '',
        sortKey: 0,
        status: 1,
        remarks: '',
      },
      isPut: false,
      rules: {
        typeName: [{ required: true, message: '类型名称不能为空', trigger: 'blur' }],
        typeCode: [
          { required: true, message: '类型编码不能为空', trigger: 'blur' },
          { validator: validator.chinese, trigger: 'blur' },
        ],
      },
    }
  },
  // 方法集合
  methods: {
    //初始化
    init(row, id) {
      let _this = this
      if (row) {
        this.isPut = true
        this.title = '编辑'
        this.form = row
      } else {
        this.isPut = false
        this.form = {
          parentId: id || 'type0',
          typeName: '',
          typeCode: '',
          sortKey: 0,
          state: 0,
          remarks: '',
        }
      }
      this.dialogVisible = true
      //移除表单校验结果
      setTimeout(() => {
        _this.$refs.form.clearValidate()
      })
    },
    // 关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {
        })
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      if (node.children == null || node.children == 'null') {
        delete node.children
      }
      return {
        id: node.typeId,
        label: node.typeName,
        children: node.children,
      }
    },
    //提交
    async onSuccess() {
      let _this = this
      _this.$refs.form.validate(async (valid) => {
        if (valid) {
          _this.loading = true
          try {
            if (_this.isPut) {
              // 修改
              await _this.$api.type.put(_this.form)
              _this.$message.success('修改成功')
            } else {
              // 添加
              await _this.$api.type.add(_this.form)
              _this.$message.success('添加成功')
            }
            await _this.$emit('load')
            _this.dialogVisible = false
            _this.loading = false
          } catch (error) {
            _this.loading = false

          }
        } else {
          console.log('validate error')
        }
      })
    },
  },
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
